<template>
	<div id="app" class="mui-center">
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="box-logos">
							<div class="logos-box">
								<span class="logos-img"><img src="./assets/img/servemorentoux.png" /></span>
								<span class="logos-tit">JESS li</span>
								<div class="logos-tits">ff</div>
							</div>
						</div>

<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
         <span class="mui-icon mui-icon-paperplane lzd-icon  mui-pull-left mui-media-object"></span>
            <div class="mui-media-body">
             <div class="media-titles">了解本站</div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
         <span class="mui-icon mui-icon-compose lzd-icon  mui-pull-left mui-media-object"></span>
            <div class="mui-media-body">
             <div class="media-titles">立即投稿</div>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
                  <span class="mui-icon lzd-icon mui-icon-starhalf  mui-pull-left mui-media-object"></span>
            <div class="mui-media-body">
            	<div class="media-titles">收藏</div>
            </div>
        </a>
    </li>
<!--     <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
                 <span class="mui-icon mui-icon-weixin lzd-icon mui-pull-left mui-media-object"></span>
            <div class="mui-media-body">
               <div class="media-titles">收藏</div>
            </div>
        </a>
    </li> -->
    <div>
    	
    </div>
</ul>
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav headerback">
					<a href="#offCanvasSide" class="mui-action-menu  mui-pull-left headerleftlogo">
						<img src="./assets/img/servemorentoux.png" />
					</a>
					<!--<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>-->
					<h1 class="mui-title">首页</h1>
				</header>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active" href="#tabbar">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首页</span>
					</a>
					<a class="mui-tab-item" href="#tabbar-with-chat">
						<span class="mui-icon mui-icon-chat"><span class="mui-badge">9</span></span>
						<span class="mui-tab-label">消息</span>
					</a>

					<a class="mui-tab-item" href="#tabbar-with-map">
						<span class="mui-icon mui-icon-contact"></span>
						<span class="mui-tab-label">个人中心</span>
					</a>
				</nav>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<router-view></router-view>
				</div>

				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>

	</div>
</template>

<script>
	import '../static/css/mui.min.css'
	import mui from '../static/js/mui.min.js'
	mui.init()
	export default {
		name: 'app',
		mounted: function() {
			this.$nextTick(function() {
				//				mui.init();
				//				//			 document.querySelector('#offCanvasWrapper').style.height = (parseInt(window.innerHeight-50) ) + 'px';
				//
				//				//			 //主界面和侧滑菜单界面均支持区域滚动；
				//				mui('#offCanvasSideScroll').scroll();
				//				mui('#offCanvasContentScroll').scroll();
				//				//实现ios平台原生侧滑关闭页面；
				//				if(mui.os.plus && mui.os.ios) {
				//					mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
				//						plus.webview.currentWebview().setStyle({
				//							'popGesture': 'none'
				//						});
				//					});
				//				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		display: initial;
		.mui-bar.headerback {
			background: -webkit-linear-gradient(left, #508EFF, #37BBFE);
			background: -o-linear-gradient(right, #508EFF, #37BBFE);
			background: -moz-linear-gradient(right, #508EFF, #37BBFE);
			background: linear-gradient(to right, #508EFF, #37BBFE);
			h1 {
				color: #fff;
			}
		}
	}
	#offCanvasSide {
			// background-image: url('./assets/img/logobj.jpg');
			background-size: 100%  ;
			background-position: center center;
      background:url('./assets/img/logobj.jpg') ;
		.box-logos {
			height:185px;
			position: relative;
			.logos-box {
				position: absolute;
				// margin-top: 100px;
				bottom: 20px;
				left: 13px;
				color: #fff;
				.logos-img {
					width: 45px;
					height: 45px;
					border-radius: 100%;
					display:inline-block;
					overflow: hidden;
					img {
						border-radius: 102%;
						width:100%;
					  border: 2px solid #fff;

					}
				}
				.logos-tit {
					color:#fff;
					font-weight: 600;
			    vertical-align: 15px;
          font-size: 20px;
				}
				.logos-tits {
					font-weight: 300;
					font-size: 15px;
					text-indent: 1em;
				}
			}
		}
	}

	.headerleftlogo {
		width: 35px;
		height: 35px;
		margin-top: 5px;
		display: inline-block;
		border-radius: 100%;
		img {
			width: 100%;
			display: inline-block;
			border-radius: 100%;
		}
	}
	#offCanvasSideScroll {
		.mui-table-view {
			background-color:rgba(0,0,0,0.2);

		}
		.mui-table-view:before,.mui-table-view:after {
			display:none;
		}
		.mui-table-view-cell:after {
				display:none
		}
		.lzd-icon {
			font-size: 30px;
			color:#fff;
			font-weight:600;
		}
		.mui-media-body {
			.media-titles {
				line-height:47px;
				color: #fff;
				font-weight:600;
				font-size:15px

			}
		 }

	}
</style>
